<template>
    <div class="box-price">
        <el-tabs type="border-card">
            <el-tab-pane>
                <span slot="label">基础费用</span>
                <el-table :data="priceData" stripe style="width: 100%;text-align:left">
                    <el-table-column prop="id" label="ID" width="50"></el-table-column>
                    <el-table-column prop="name" label="车型"></el-table-column>
                    <el-table-column prop="ini_price" label="起步价"></el-table-column>
                     <el-table-column prop="ini_dis" label="起步里程"></el-table-column>
                    <el-table-column prop="exceed_price" label="超里程费用"></el-table-column>
                    <el-table-column prop="place_price" label="增加装卸地费用"></el-table-column>
                    <el-table-column prop="shift_price" label="平面搬运费用(元/米)" width="180"></el-table-column>
                    <el-table-column prop="shift_dis" label="免费平面距离(米)" width="180"></el-table-column>
                    <el-table-column prop="floor_price" label="楼层阶梯费用"></el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEditBasePrice(scope.$index, scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label">大件物品</span>
                <!-- <div class="btn-add">
                    <el-button size="medium" type="primary" @click="showPop=true">新增物品</el-button>
                </div> -->
                <el-tabs tab-position="left" @tab-click="selectArtItem()" v-model="activeArt">
                    <el-tab-pane v-for="(item , index) in artData" :key="index" :name="''+index">
                        <span slot="label">{{item.name}}</span>
                        <div class="list">
                            <ul>
                                <li class="item" v-for="(items, idx) in item.children" :key="idx">
                                    <div class="spec">
                                        {{items.name}}
                                    </div>
                                    <div class="row">
                                        <span class="txt">单价:</span>
                                        <el-input placeholder="单价" size="small" v-model="items.price"></el-input>
                                    </div>
                                </li>
                            </ul>
                            <el-button type="primary" size="small" @click="saveArtPrice">保存</el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>

            </el-tab-pane>
        </el-tabs>
        <el-dialog :visible.sync="showDialog">
            <el-form ref="form" :model="formA" label-width="100px" style="width:420px">
                <el-form-item label="起步价">
                    <el-input v-model="formA.iniPrice" placeholder="请输入该车型起步价"></el-input>
                </el-form-item>
                <el-form-item label="起步里程">
                    <el-input v-model="formA.iniDis" placeholder="请输入起步里程"></el-input>
                </el-form-item>
                <el-form-item label="超里程费">
                    <el-input v-model="formA.exceedPrice" placeholder="请输入超里程费用"></el-input>
                </el-form-item>
                <el-form-item label="装卸地费">
                    <el-input v-model="formA.placePrice" placeholder="每增加一个装卸地费用"></el-input>
                </el-form-item>
                <el-form-item label="平面搬运费">
                    <div class="flex-row">
                        <el-input v-model="formA.shiftPrice" placeholder="平面搬运费用"></el-input>
                        <el-input v-model="formA.shiftDis" placeholder="免费距离"></el-input>
                        <span class="tip">米内免费</span>
                    </div>
                </el-form-item>
                <el-form-item label="楼层费用">
                    <el-input v-model="formA.floorPrice" placeholder="无电梯每楼层递加费"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveBasePrice">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import validForm from "../assets/js/valid.js";
export default {
  data() {
    return {
      showPop: false,
      showDialog: false,
      formA: {
        exceedPrice: "",
        carType: "",
        placePrice: "",
        shiftDis: "",
        floorPrice: "",
        shiftPrice: "",
        iniPrice: "",
        iniDis: ""
      },
      formB: {
        name: "",
        price: ""
      },
      artData: [],
      priceData: [],
      activeArt: "0"
    };
  },
  methods: {
    getArtList() {
      let self = this;
      fetch("/api/admin/artlist")
        .then(response => response.json())
        .then(data => {
          self.artData = data.data;
        })
        .catch(err => console.log("Oh, error", err));
    },
    getBasePriceList() {
      let self = this;
      let mid = JSON.parse(localStorage.getItem("userInfo")).merchantId;
      fetch("/api/admin/pricelist?mid=" + mid)
        .then(response => response.json())
        .then(data => {
          self.priceData = data.data;
        })
        .catch(err => console.log("Oh, error", err));
    },
    validA() {
      let validtor = new validForm();
      validtor.add(this.formA.iniPrice, [
        {
          rule: "isFloatNum",
          msg: "起步价格式不正确"
        }
      ]);
       validtor.add(this.formA.iniDis, [
        {
          rule: "isFloatNum",
          msg: "起步里程格式不正确"
        }
      ]);
      validtor.add(this.formA.exceedPrice, [
        {
          rule: "isFloatNum",
          msg: "超出里程费用格式不正确"
        }
      ]);
      validtor.add(this.formA.placePrice, [
        {
          rule: "isFloatNum",
          msg: "增加装卸地费用格式不正确"
        }
      ]);
      validtor.add(this.formA.shiftPrice, [
        {
          rule: "isFloatNum",
          msg: "平面搬运费用格式不正确"
        }
      ]);
      validtor.add(this.formA.shiftDis, [
        {
          rule: "isFloatNum",
          msg: "免费距离格式不正确"
        }
      ]);
      validtor.add(this.formA.floorPrice, [
        {
          rule: "isFloatNum",
          msg: "楼层递加费用格式不正确"
        }
      ]);
      return validtor.start();
    },
    handleEditBasePrice(index, row) {
      this.formA.exceedPrice = row.exceed_price;
      this.formA.carType = row.car_type;
      this.formA.placePrice = row.place_price;
      this.formA.shiftDis = row.shift_dis;
      this.formA.floorPrice = row.floor_price;
      this.formA.shiftPrice = row.shift_price;
      this.formA.iniPrice = row.ini_price;
      this.formA.iniDis = row.ini_dis;
      this.showDialog = true;
    },
    saveBasePrice() {
      let msg = this.validA();
      let mid = JSON.parse(localStorage.getItem("userInfo")).merchantId;
      let self = this;
      if (msg) {
        this.$notify.error({
          title: "表单填写错误",
          message: msg
        });
        return;
      }
      fetch("/api/admin/editprice", {
        method: "POST",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        body:
          "carType=" +
          self.formA.carType +
          "&exceedPrice=" +
          self.formA.exceedPrice +
          "&shiftPrice=" +
          self.formA.shiftPrice +
          "&shiftDis=" +
          self.formA.shiftDis +
          "&floorPrice=" +
          self.formA.floorPrice +
          "&placePrice=" +
          self.formA.placePrice +
          "&iniPrice=" +
          self.formA.iniPrice +
          "&iniDis=" +
          self.formA.iniDis +
          "&mid=" +
          mid
      })
        .then(response => response.json())
        .then(res => {
          if (res.status == 100) {
            self.$notify({
              title: "成功",
              message: res.msg,
              type: "success"
            });
            self.showDialog = false;
            self.getBasePriceList();
          }
        })
        .catch(err => console.log("Oh, error", err));
    },
    selectArtItem() {
      console.log(this.activeArt);
    },
    saveArtPrice() {
      let data = this.artData[this.activeArt];
      let re = /^\d+(?=\.{0,1}\d+$|$)/;
      let self = this;
      console.log(JSON.stringify(data));
      for (let i = 0; i < data.children.length; i++) {
        if (!re.test(data.children[i].price)) {
          this.$notify.error({
            title: "错误",
            message: "表单填写错误"
          });
          return;
        }
      }

      fetch("/api/admin/editcartprice", {
        method: "POST",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        body: "data=" + JSON.stringify(data)
      })
        .then(response => response.json())
        .then(res => {
          if (res.status == 100) {
            self.$notify({
              title: "成功",
              message: res.msg,
              type: "success"
            });
            self.showDialog = false;
            self.getArtList();
          }
        })
        .catch(err => console.log("Oh, error", err));
    },
    handleEdit() {
      this.showPop = true;
    },
    handleDelete() {}
  },
  created() {
    this.getArtList();
    this.getBasePriceList();
  },
  components: {}
};
</script>

<style lang='scss'>
@import "../assets/scss/common.scss";
@import "../assets/scss/price.scss";
</style>

